<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>考试状态</title>

    <th:block th:include="fragment_header :: header">
    </th:block>
    <style>
        /* 添加样式，居中按钮和文字 */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
                   background-color: #e3f2fd; /* 添加浅蓝色背景颜色 */
        }
        .btn1 {
            font-size: 40px; /* 放大按钮文字 */
        }
        #statusMessage {
            font-size: 50px; /* 放大文本提示字体大小 */
        }
        #countdown {
            font-size: 50px; /* 放大倒计时字体大小 */
        }


    </style>
</head>
<body>
<div style="text-align:center">
    <span id="countdown"></span>
</div>
<div style="text-align:center">
    <span id="statusMessage">考试未开始，请等待</span>
</div>
<div style="text-align:center">



    <!-- 修改按钮为链接，并添加 Thymeleaf 的 URL 表达式 -->
    <a th:href="@{ /answerbook/exam/{examId}/student/{studentId} (examId=${examId}, studentId=${studentId}) }" class="btn btn-primary btn-lg btn1 disabled">进入考试</a>

    <script type="text/javascript">
        var examTimeStr = "[[${startTime}]]"; // 获取从后端传递的考试时间
        var examStart = new Date(examTimeStr);
        var currentTime = new Date();
        var timeDifference = examStart - currentTime;
        var statusMessage = document.getElementById('statusMessage');
        var countdownMessage = document.getElementById('countdown');
        var button = document.querySelector('.btn1'); // 通过 class 名称选择按钮
        if (timeDifference > 0) {
            // 当时间未到时，显示倒计时
            statusMessage.textContent = '考试未开始，请等待';
            var countdownInterval = setInterval(function() {
                currentTime = new Date();
                timeDifference = examStart - currentTime;

                if (timeDifference <= 0) {
                    // 时间到达，显示 "请开始考试"
                    clearInterval(countdownInterval);
                    statusMessage.textContent = '请开始考试';
                    countdownMessage.textContent = '';
                    button.classList.remove('disabled'); // 移除禁用样式
                } else {
                    // 倒计时显示
                    var seconds = Math.floor(timeDifference / 1000);
                    var minutes = Math.floor(seconds / 60);
                    var hours = Math.floor(minutes / 60);
                    var days = Math.floor(hours / 24);
                    seconds = seconds % 60;
                    minutes = minutes % 60;
                    hours = hours % 24;
                    countdownMessage.textContent = '考试倒计时：' + days + '天' + hours + '时' + minutes + '分' + seconds + '秒';
                    button.classList.add('disabled'); // 添加禁用样式
                }
            }, 1000);
        } else if (timeDifference <= -5 * 60 * 60 * 1000) {
            // 当考试时间过去五小时以上时，显示 "考试已结束"
            statusMessage.textContent = '考试已结束';
            countdownMessage.textContent = '';
            button.classList.add('disabled'); // 添加禁用样式
        } else {
            // 时间已到，显示 "请开始考试"
            statusMessage.textContent = '请开始考试';
            countdownMessage.textContent = '';
            button.classList.remove('disabled'); // 移除禁用样式
        }

        // 设置是否考试已开始的变量
        var isExamStarted = timeDifference <= 0 && timeDifference > -5 * 60 * 60 * 1000;


    </script>
</div>
</body>
</html>
